<template>
  <div class="item">
    <!-- <button @click="showDatePicker"></button> -->
    <div class="list-buttom" @click="refreshList('prev')">前一天</div>
    <div class="list-buttom cur-date" @click="showDatePicker">{{today}} <span class="icon-span"><Icon type="calendar"></Icon></span> </div>
    <div class="list-buttom" @click="refreshList('next')" >后一天</div>

    <!-- <cube-button  :light="true">前一天</cube-button>
    <cube-button :primary="true" class="cur-date">{{today}}</cube-button>
    <cube-button  :light="true">后一天</cube-button> -->
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import  api from '../../assets/js/api'
export default {
  data () {
    return {
      today:"",
      minDate:"",
      maxDate:"",
    };
  },
  methods: {
    showDatePicker () {
      if (!this.datePicker) {
        this.datePicker = this.$createDatePicker({
          title: "日期",
          min: new Date(this.minDate),
          max: new Date(this.maxDate),
          value: new Date(),
          onSelect: (date, selectedVal, selectedText) => {
            console.log(selectedVal);
            let tostring =
              selectedVal[0] +
              "-" +
              selectedVal[1] +
              "-" +
              selectedVal[2];

              //解决ios手机上面 时间格式化问题
              tostring = tostring.replace(/\-/g, "/");
              //日期格式化
              tostring = new Date(tostring).Format("yyyy-MM-dd");
              this.today = tostring;
              //向父组件传递值
              this.$emit('selectDate', this.today);
          },
          onCancel: () => {
            console.log("取消了");
          },
        });
      }
      this.datePicker.show();
    },
    initDate () {
      let today = new Date().Format("yyyy-MM-dd");
      this.today = today

      //时间筛选器 最小值 和 最大值
      // let select_date = sessionStorage.getItem("select_date");
      // select_date = JSON.parse(select_date)

      let curDate = (new Date()).getDate();
      //截止时间
      let date1 = new Date();
      date1 =  new Date(date1.setDate(curDate+2)).Format("yyyy-MM-dd")
      //开始时间
      let date2 = new Date();
      date2 =  new Date(date2.setDate(curDate-30)).Format("yyyy-MM-dd")

      console.log(date2,date1);
      this.minDate = date2
      this.maxDate = date1
      console.log('initDate')

    },
    getData () {

    },
    //向父组件传递值
    refreshList (type = "") {

      let date = new Date(this.today);
      let time = date.getTime();

      // console.log("点击日期筛选类型"+type+ "当前选择的时间为"+date + "时间戳为"+time);

      if (type == "prev") {
        //获取前一天的时间戳
        time = (time/1000 - 24*60*60) * 1000;
        date = new Date(time).Format("yyyy-MM-dd");
      } else if (type == "next") {
        time = (time/1000 + 24*60*60) * 1000;
        date = new Date(time).Format("yyyy-MM-dd");
      } else {
        date = new Date(time).Format("yyyy-MM-dd");
      }
      //检查时间是否超过范围
      let startTtime = new Date(this.minDate).getTime();
      let endTime = new Date(this.maxDate).getTime();
      if (time < startTtime || time > endTime) {
        Toast({
          message: "非法的筛选时间",
          position: "bottom",
          duration: 2000
        });

        return false;
      }

      this.today = date;
      this.$emit('selectDate', date);
    },

    getHospitalList () {
      this.hospital_id = "";
      let list = JSON.parse(localStorage.hospital_list);
      if (list.length > 0) {
        list.forEach(element => {
          element.text = element.name;
          element.value = element.id;
        });
        this.hospitalList = list;
      }
    },
    selectHospital () {
      this.getData(this.hospital_id);
    },
    tips (item) {
      if (item.order_status != 1) {
        Toast({
          message: "预约单已关闭",
          position: "bottom",
          duration: 2000
        });
      }
    }
  },
  created () {
    this.axios.defaults.baseURL = api
    this.initDate();
  }
};
</script>

<style lang="less" scoped>

.item{
  display: flex;
    background-color: #fff;
    border-bottom: 2px solid RGBA(238, 241, 245, 1);
}
.item .list-buttom{
  flex: 2 1 0%;
  display: block;
  font-size: 15px;
  margin: 10px 6px;
  background-color: #fff;
  text-align: center;
  height: 36px;
  line-height: 36px;
}
.item .cur-date{
  border-radius: 10px;
  background-color: #ff83a6 !important;
  color: #fff;
  flex-grow: 3 !important;

  span{
    position: relative;
    padding-left: 10px;
  }
  span:before{
    content:"";
    position: absolute;
    left: 2px;
    top: 20%;
    height: 60%;
    width: 2px;
    background-color:RGBA(255, 193, 209, 1);
  }
}


</style>

<style>
.cube-select-icon {
  border: 0 !important;
}
</style>
